<template>
  <div class="daren-list">
    <div class="daren-container">
      <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 daren-list-item" v-for="index in 3" :key="index">
        <div class="daren-item">
          <div class="daren-img">
            <img src="http://image.howzhi.com/user/2016/07-08/1027517b63e0030030.png" alt="">
          </div>
          <div class="daren-info">
            <p class="daren-name font-primary">星火教育</p>
            <p class="identify"><i class="iconfont icon-user"></i>英语培训</p>
            <p class="daren-desc">知名英语教育机构</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup () { }
}
</script>

<style lang="scss" scoped>
.daren-list {
  width: 100%;
  .daren-container {
    display: flex;
    margin: 0 -15px;
    @media (max-width: 576px) {
      flex-direction: column;
      align-items: center;
    }
    .daren-list-item {
      padding: 0 15px;
      .daren-item {
        @media (max-width: 992px) {
          flex-direction: column;
          align-items: center;
        }
        border: 1px solid #f0f0f0;
        display: flex;
        padding: 20px;
        .daren-img {
          margin-right: 8px;
          img {
            width: 100px;
            border-radius: 50%;
          }
        }
        p {
          margin: 0;
        }
        .daren-info {
          padding-top: 10px;
          text-align: center;
          .identify {
            padding-top: 2px;
            padding: 6px 15px;
            background-color: #ff9439;
            border-radius: 30px;
            color: #fff;
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .daren-desc {
            padding-top: 12px;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
